<template>
	<view>
		<view class="item" v-for="(todo,index) in todolist" :key="index">
			<view class="title" @click="showContent(index)"><text>{{todo.title}}</text><text>{{todo.time}}</text></view>
			<view class="content" v-show="todo.view">
				{{todo.content}}
			</view>
		</view>

	</view>
</template>

<script>
	import {
		ref
	} from "vue"
	export default {
		props: {
			todolist: Array
		},
		setup(props) {
			console.log(props)

			const showContent = (a) => {
				console.log(a)
				for (let i = 0; i < props.todolist.length; i++) {
					if (props.todolist[i].title != props.todolist[a].title) {
						props.todolist[i].view = false;
					}
				}
				props.todolist[a].view = !props.todolist[a].view;
			}

			return {
				showContent
			}
		}
	}
</script>

<style lang="scss" scoped>
	.item {
		border-bottom: 1rpx solid #ccc;
		margin-bottom: 5rpx;
	}

	.title {
		background-color: #dde2f0;
		display: flex;
		flex-flow: row nowrap;
		justify-items: center;
		justify-content: space-between;

		text {
			// flex: 1;
			padding: 20rpx;
			font-weight: 400;
		}
	}

	.content {
		background-color: #f1e5e5;
		font-size: $uni-font-size-base;
		padding: 40rpx;

	}
</style>
